import React, { Component } from 'react';
import './MyTab.scss'
// import { category_list, category_subcate } from '../../utils/api'
import Left from './Left';
import Right from './Right'
class Content extends Component {
    constructor(props) {
        super(props)
        this.state = {
            // currentIndex: 0,
            // leftList: [],
            // rightList: [],
        }
    }
    // componentDidMount() {
    //     category_list().then((res) => {
    //         // console.log(res);
    //         this.setState({
    //             leftList: res.data.list
    //         })
            // let id = res.data.list[0].id
            // this.handleClick(id,0)
        // })
        // category_subcate({id:{state.leftList[0].id}}).then((res)=>{
        //     console.log(this.state.leftList[0].id);
        //     // console.log(res);
        // })
    // }
    // 写成箭头函数，解决this指向问题 handleClick = (id, index) => {}
    // handleClick(id, index) {
    //     this.setState({
    //         currentIndex: index,
    //     })
    //     category_subcate({ id }).then((res) => {
    //         console.log(res.data.subcate.subcategory);
    //         this.setState({
    //             rightList: res.data.subcate.subcategory
    //         })
    //     })

    // }
    render() {
        return (
            <div className='content'>
                {/* 左侧一级分类组件 */}
                <Left arr={this.state.leftList} ></Left>
                {/* 右侧二级分类组件 */}
                <Right></Right>
                {/* <Right arr={this.state.rightList}></Right> */}


                {/* <ul className='left'>
                    {
                        this.state.leftList.map((item, index) => {
                            return (
                                <li onClick={() => { this.handleClick(item.id, index) }}
                                    style={{ backgroundColor: this.state.currentIndex === index ? 'white' : '' }}
                                >
                                    <span className={this.state.currentIndex === index ? 'active' : ''}>
                                        {item.name}
                                    </span>
                                </li>


                            )
                        })
                    }
                </ul> */}
                {/* <div className='right'>
                    {
                        this.state.rightList.map((item) => {
                            return (
                                <div>
                                    <h2>{item.name}</h2>
                                    {
                                        item.subNavs.map((i) => {
                                            return (
                                                <div className='it'>
                                                    <img src={i.pic} alt="" />
                                                    <span>{i.name}</span>
                                                </div>
                                            )
                                        })
                                    }
                                </div>

                            )
                        })
                    }
                </div> */}

            </div>
        );
    }
}

export default Content;